<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="90%">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="直播间名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入直播间名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="主播昵称" prop="anchorName">
						<el-input v-model="form.anchorName" placeholder="请输入主播昵称" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="直播开始时间" prop="startTime">
						<template #label>
							直播开始时间
							<el-popover :width="400">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>
									开播时间段仅供参考，不是实际直播间可以开播的时间。 直播间在开始时间前也可以开播，并且到结束时间后不会强制结束。
									若到结束时间仍未开播，则直播间无法再开播。
								</template>
							</el-popover>
						</template>
						<el-date-picker v-model="form.startTime" type="datetime" clearable value-format="X" placeholder="请选择开始时间" class="w100" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="直播结束时间" prop="endTime">
						<el-date-picker v-model="form.endTime" type="datetime" clearable value-format="X" placeholder="请选择结束时间" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="主播微信账号" prop="anchorWechat">
						<el-select v-model="form.anchorWechat" placeholder="请选择主播" class="w100">
							<el-option v-for="item in anchorWechatOptions" :key="item.username" :label="item.nickname" :value="item.username" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="主播副号" prop="subAnchorWechat">
						<template #label>
							主播副号
							<el-popover :width="320">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>
									主播副号可进行推送商品，抽奖等操作。但以下功能无法使用：<br />
									· 直播间控制：开启直播、结束直播、恢复直播<br />
									· 画面控制：美颜、美白、翻转<br />
									· 副号设置：添加副号、删除副号<br />
									· 其他：视频连麦、语音连麦
								</template>
							</el-popover>
						</template>
						<el-input v-model="form.subAnchorWechat" placeholder="请输入主播副号（微信号）" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="直播类型" prop="type">
						<template #label>
							直播类型
							<el-popover :width="350">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>
									<h3>手机直播</h3>
									通过“小程序直播”小程序开播
									<h3>推流设备直播</h3>
									通过第三方推流设备发起直播，请自行定义画面宽高比 
								</template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.type">
							<el-radio :label="0">手机直播</el-radio>
							<el-radio :label="1">推流设备直播</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="官方收录" prop="isFeedsPublic">
						<template #label>
							官方收录
							<el-popover :width="350">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>
									官方收录包括以下两个渠道：
									<h3>小程序搜索</h3>
									用户可从“发现>小程序>小程序搜索框”，或“下拉微信首页任务栏>小程序搜索框“搜索相关小程序。如果该小程序近期有直播则会被推荐展示。
									<h3>直播间详情卡</h3>
									直播间详情卡 用户点击直播间左上角小程序头像可打开直播间详情卡，卡片内会推荐该小程序近期的直播。
								</template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.isFeedsPublic">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="客服" prop="closeKf">
						<template #label>
							客服
							<el-popover :width="210">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>开启后直播间将显示客服入口</template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.closeKf">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="评论" prop="closeComment">
						<template #label>
							评论
							<el-popover :width="230">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default> 若关闭，观众端将隐藏点赞按钮直播开始后，将无法重新打开 </template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.closeComment">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="商品货架" prop="closeGoods">
						<template #label>
							商品货架
							<el-popover :width="230">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default> 若关闭，观众端将隐藏点赞按钮直播开始后，将无法重新打开 </template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.closeGoods">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分享" prop="closeShare">
						<template #label>
							分享
							<el-popover :width="280">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default> 关闭分享功能后，观众无法分享直播间 直播开始后，将无法重新打开 </template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.closeShare">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="点赞" prop="closeLike">
						<template #label>
							点赞
							<el-popover :width="230">
								<template #reference>
									<el-icon><i class="el-icon-question" /></el-icon>
								</template>
								<template #default>若关闭，观众端将隐藏点赞按钮直播开始后，将无法重新打开</template>
							</el-popover>
						</template>
						<el-radio-group v-model="form.closeLike">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="回放" prop="closeReplay">
						<el-radio-group v-model="form.closeReplay">
							<el-radio :label="0">开启</el-radio>
							<el-radio :label="1">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="直播卡片封面" prop="feedsImg_image">
						<template #label>
							直播卡片封面<br />
							<span style="font-size: 12px; color: red">尺寸800*800</span><br />
							<span style="font-size: 12px; color: red">大小不超过350kb</span><br />
							<span style="font-size: 12px; color: red">图片内容遵循平台</span><br />
							<span style="font-size: 12px; color: red">规范后更容易被推荐</span><br />
							<span style="font-size: 12px; color: red">
								了解官方收录
								<el-popover :width="350">
									<template #reference>
										<el-icon><i class="el-icon-question" /></el-icon>
									</template>
									<template #default>
										官方收录包括以下两个渠道：
										<h3>小程序搜索</h3>
										用户可从“发现>小程序>小程序搜索框”，或“下拉微信首页任务栏>小程序搜索框“搜索相关小程序。如果该小程序近期有直播则会被推荐展示。
										<h3>直播间详情卡</h3>
										直播间详情卡 用户点击直播间左上角小程序头像可打开直播间详情卡，卡片内会推荐该小程序近期的直播。
									</template>
								</el-popover>
							</span>
						</template>
						<image-upload-COS v-model="form.feedsImg_image" v-model:media_id="form.feedsImg" path="live" isLive ref="imageUploadFeedsImgRef" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="直播封面" prop="shareImg_image">
						<template #label>
							直播封面<br />
							<span style="font-size: 12px; color: red">尺寸800*640</span><br />
							<span style="font-size: 12px; color: red">大小不超过350kb</span>
						</template>
						<image-upload-COS v-model="form.shareImg_image" v-model:media_id="form.shareImg" path="live" isLive ref="imageUploadShareImgRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20" :gutter="10">
				<el-col :span="12">
					<el-form-item label="直播海报" prop="coverImg_image">
						<template #label>
							直播海报<br />
							<span style="font-size: 12px; color: red">尺寸750*1090</span><br />
							<span style="font-size: 12px; color: red">大小不超过350kb</span>
						</template>
						<image-upload-COS v-model="form.coverImg_image" v-model:media_id="form.coverImg" path="live" isLive ref="imageUploadCoverImgRef" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="主播头像" prop="head_image">
						<template #label>
							主播头像<br />
							<span style="font-size: 12px; color: red">尺寸100*100</span><br />
							<span style="font-size: 12px; color: red">大小不超过350kb</span>
						</template>
						<image-upload-COS v-model="form.head_image" path="live" ref="imageUploadHeadImageRef" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { getCurrentInstance, nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

import { livesApi } from '/@/api/admin';
import { stringNum } from '/@/utils/toolsValidate';

const LivesApi = livesApi()
export default {
	name: 'liveStudioAddDialog',
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const validateName = (rule: any, value: any, callback: Function) => {
			let _value: any = stringNum(value) / 2;
			if (parseInt(_value) > 17) {
				callback(new Error('直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符'));
			} else if (2 >= parseInt(_value)) {
				callback(new Error('直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符'));
			} else {
				callback();
			}
		};
		const validateAnchorName = (rule: any, value: any, callback: Function) => {
			let _value: any = stringNum(value) / 2;
			if (parseInt(_value) > 15) {
				callback(new Error('主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符'));
			} else if (1 >= parseInt(_value)) {
				callback(new Error('主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符'));
			} else {
				callback();
			}
		};
		const validateStartTime = (rule: any, value: any, callback: Function) => {
			if (proxy.dayjs().unix() + 600 > Number(value)) {
				callback(new Error('开播时间需要在当前时间的10分钟后'));
			} else {
				callback();
			}
		};
		const validateEndTime = (rule: any, value: any, callback: Function) => {
			if (!state.form.startTime || Number(state.form.startTime) + 1800 > Number(value) || Number(value) > Number(state.form.startTime) + 86400) {
				callback(new Error('开播时间和结束时间间隔不得短于30分钟，不得超过24小时'));
			} else {
				callback();
			}
		};
		const state = reactive({
			title: '直播间创建',
			open: false,
			anchorWechatOptions: [] as any,
			form: {} as any,
			rules: {
				name: [
					{ required: true, message: '直播间名称不能为空', trigger: 'blur' },
					{ required: true, validator: validateName, trigger: 'blur' },
				],
				anchorName: [
					{ required: true, message: '主播昵称不能为空', trigger: 'blur' },
					{ required: true, validator: validateAnchorName, trigger: 'blur' },
				],
				startTime: [
					{ required: true, message: '直播开始时间不能为空', trigger: ['blur', 'change'] },
					{ required: true, validator: validateStartTime, trigger: ['blur', 'change'] },
				],
				endTime: [
					{ required: true, message: '直播结束时间不能为空', trigger: ['blur', 'change'] },
					{ required: true, validator: validateEndTime, trigger: ['blur', 'change'] },
				],
				anchorWechat: [{ required: true, message: '主播微信账号不能为空', trigger: ['blur', 'change'] }],
				shareImg_image: [{ required: true, message: '分享卡片封面不能为空', trigger: ['blur', 'change'] }],
				feedsImg_image: [{ required: true, message: '直播卡片封面不能为空', trigger: ['blur', 'change'] }],
				coverImg_image: [{ required: true, message: '直播间背景墙不能为空', trigger: ['blur', 'change'] }],
				head_image: [{ required: true, message: '主播头像不能为空', trigger: ['blur', 'change'] }],
			}, // 表单校验
			submitLoading: false,
		});

		const formRef = ref(null);
		const imageUploadShareImgRef = ref(null);
		const imageUploadFeedsImgRef = ref(null);
		const imageUploadCoverImgRef = ref(null);
		const imageUploadHeadImageRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.form);
					_addLives({
						...state.form,
						createrWechat: state.form.anchorWechat,
						shareImg_image: state.form.shareImg_image.replace(import.meta.env.VITE_FILE_API, ''),
						feedsImg_image: state.form.feedsImg_image.replace(import.meta.env.VITE_FILE_API, ''),
						coverImg_image: state.form.coverImg_image.replace(import.meta.env.VITE_FILE_API, ''),
						head_image: state.form.head_image.replace(import.meta.env.VITE_FILE_API, ''),
					});
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			_livesMemberList();
			nextTick(() => {
				(imageUploadShareImgRef.value as any)?.dataLoading();
				(imageUploadFeedsImgRef.value as any)?.dataLoading();
				(imageUploadCoverImgRef.value as any)?.dataLoading();
				(imageUploadHeadImageRef.value as any)?.dataLoading();
			});
		};
		// 表单重置
		const reset = () => {
			state.form = {
				name: '', // 直播间标题
				anchorName: '', // 主播昵称
				startTime: '', // 直播开始时间
				endTime: '', // 直播结算时间
				anchorWechat: '', // 主播微信号
				subAnchorWechat: '', // 主播副号
				type: 0, // 直播类型
				isFeedsPublic: 1, // 官方收录
				closeComment: 0, // 评论
				closeGoods: 0, // 商品货架
				closeShare: 0, // 分享
				closeLike: 0, // 点赞
				closeReplay: 0, // 回放
				closeKf: 1, // 客服
				shareImg_image: '', // 分享卡片封面
				shareImg: '', // 分享卡片封面ID
				feedsImg_image: '', // 直播卡片封面
				feedsImg: '', // 直播卡片封面ID
				coverImg_image: '', // 直播间背景墙
				coverImg: '', // 直播间背景墙ID
				head_image: '', // 主播头像
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadShareImgRef.value as any)?.reset();
				(imageUploadFeedsImgRef.value as any)?.reset();
				(imageUploadCoverImgRef.value as any)?.reset();
				(imageUploadHeadImageRef.value as any)?.reset();
			});
		};

		/********** 网络事件 **********/
		// 直播成员列表
		const _livesMemberList = () => {
			LivesApi.livesMemberList()
				.then((res: any) => {
					state.anchorWechatOptions = res.data.list;
				})
				.catch(() => {});
		};
		// 添加直播间
		const _addLives = (params: object) => {
			LivesApi.addLives(params)
				.then(() => {
					ElMessage.success('添加成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			imageUploadShareImgRef,
			imageUploadFeedsImgRef,
			imageUploadCoverImgRef,
			imageUploadHeadImageRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
